// @import '../../mixin';

[component-name=edit-tabs] {

    .ant-card:first-child:nth-last-child(1) {

        @media (max-width: 600px) {
            .auto {
                width: 99%;
                margin-right: 1%;
            }
        }

        @media (min-width: 600px) and (max-width: 1000px) {
            .auto {
                width: 49%;
                margin-right: 1%;
            }
        }

        @media (min-width: 1000px) and (max-width: 1400px) {
            .auto {
                width: 32.33%;
                margin-right: 1%;
            }
        }

        @media (min-width: 1400px) {
            .auto {
                width: 24%;
                margin-right: 1%;
            }
        }
    }

    .ant-card:first-child:nth-last-child(2) {

        @media (max-width: 1000px) {
            .auto {
                width: 99%;
                margin-right: 1%;
            }
        }

        @media (min-width: 1000px) and (max-width: 1300px) {
            .auto {
                width: 49%;
                margin-right: 1%;
            }
        }

        @media (min-width: 1300px) and (max-width: 1600px) {
            .auto {
                width: 32.33%;
                margin-right: 1%;
            }
        }

        @media (min-width: 1600px) {
            .auto {
                width: 24%;
                margin-right: 1%;
            }
        }

    }
}


[component-name=forms] {
    display: flex;
    flex-wrap: wrap;

    .auto {
        width: 24%;
        margin-right: 1%;
        overflow: hidden;
    }

    .full {
        width: 99%;
        margin-right: 1%;
        overflow: hidden;
    }

    .null {
        width: 100%;
        height: 40px;
        position: relative;
        display: flex;
        align-items: center;

        &::before {
            content: '';
            width: 3px;
            height: 30px;
        }

        &.dragover {
            &::before {
                background-color: #333;
                animation: blink 1s step-start 0s infinite;
            }
        }
    }
}

[component-name=form-item] {

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
            /* 完全可见 */
        }

        50% {
            opacity: 0;
            /* 完全透明 */
        }
    }

    display: flex;
    align-items: center;

    &.hidden {
        display: none;
    }

    &.dragging {
        opacity: 0.3;
    }

    .web-screen-modal .web-screen-modal-header .title {
        font-size: 14px;
    }

    .ant-select-single .ant-select-selector {
        border-radius: 3px;
    }

    .field {
        flex: 1;
        position: relative;
        padding: 8px 0;
        display: flex;
        align-items: center;
        overflow: hidden;

        &.vertical {
            flex-direction: column;
            align-items: flex-start;

            .label {
                height: 30px;
            }

            .control {
                width: 100%;
            }
        }

        .error-txt {
            font-size: 12px;
            color: var(--error);
            position: absolute;
        }

        .label {
            &::before {
                content: '';
                width: 3px;
                height: 30px;
            }

            &.dragover {
                &::before {
                    background-color: #333;
                    animation: blink 1s step-start 0s infinite;
                }
            }

            display: flex;
            width: 120px;
            align-items: center;
            margin-right: 10px;

            .label-name {
                flex: 1;
                overflow: hidden;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                /* white-space: nowrap;
                text-overflow: ellipsis;*/
                line-height: 100%;
                pointer-events: none;
            }

            .valid-success {
                width: 8px;
                text-align: center;
            }

            .valid-fail {
                color: var(--danger);
                width: 8px;
                text-align: center;
            }
        }

        /* 拖拽 */
        .control {
            &::after {
                content: '';
                width: 3px;
                height: 30px;
                margin-left: 3px;
            }

            &.dragover {
                &::after {
                    background-color: #333;
                    animation: blink 1s step-start 0s infinite;
                }
            }

            flex: 1;
            display: flex;
            overflow: hidden;
            align-items: center;

            .data-link-btn {
                margin-left: 5px;
                font-size: 14px;
                cursor: pointer;
                border-radius: 3px;
            }

            .value {
                flex: 1;
                position: relative;
                overflow: hidden;



                .selector-dataflow {
                    flex: 1;
                    height: 30px;
                    line-height: 30px;
                    box-sizing: border-box;
                    border: 1px solid #d9d9d9;
                    border-radius: 3px;
                    text-indent: 10px;
                    background-color: #FFFFFF;
                    /** 内容过长时，也不换行 */
                    // @include ell();

                    .placeholder {
                        color: #bfbfbf;
                    }
                }

                .readonly {
                    border: 1px solid #d9d9d9;
                    color: rgba(0, 0, 0, 0.7);
                    background-color: #DDDDDD;
                    box-sizing: border-box;
                    height: 32px;
                    border-radius: 3px;
                    width: 100%;
                    display: flex;
                    overflow: hidden;
                    align-items: center;

                    &.display-value {
                        background-color: #ffffff;
                    }

                    .text {
                        margin: 0 5px 0 11px;
                        flex: 1;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .unit {
                        border-left: 1px solid #d9d9d9;
                        color: rgba(0, 0, 0, 0.25);
                        padding: 0 11px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                    }
                }

                .input {
                    width: 100%;
                    border-radius: 3px;

                    &.error {
                        border: 1px solid var(--danger);
                    }
                }

                .select {
                    width: 100%;
                    border-radius: 3px;
                }

                .textarea {
                    width: 100%;
                    border-radius: 3px;
                }

                .textarea-readonly {
                    border: 1px solid #d9d9d9;
                    color: rgba(0, 0, 0, 0.7);
                    background-color: #DDDDDD;
                    box-sizing: border-box;
                    border-radius: 3px;
                    min-height: 76px;
                    max-height: 186px;
                    padding: 4px 11px;
                    overflow: hidden;
                    overflow-y: auto;
                }

                .textarea-text {
                    width: 100%;
                    box-sizing: border-box;
                    border: 1px solid #d9d9d9;
                    border-radius: 3px;
                    padding: 4px 11px;
                    height: 76px;
                    // @include ells(3);

                    &.readonly {
                        background-color: #DDDDDD;
                    }
                }

                .date-picker {
                    width: 100%;
                    border-radius: 3px;
                }

                .number {
                    width: 100%;
                    border-radius: 3px;
                }

                .currency {
                    width: 100%;
                    border-radius: 3px;
                }

                .cascader {
                    width: 100%;
                    border-radius: 3px;
                }

                .auto-complete {
                    width: 100%;
                    border-radius: 3px;
                }

                .switch {
                    width: 100%;
                    border-radius: 3px;
                }

                .startend {
                    width: 100%;
                    display: flex;
                    align-items: center;

                    .start,
                    .end {
                        flex: 1;
                    }

                    .start {
                        margin-right: 10px;
                    }

                    .end {
                        margin-left: 10px;
                    }
                }

                &.picker {
                    display: flex;
                }

            }

            .currency-value {
                position: relative;

                .currency {
                    position: relative;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 01;
                    border-radius: 3px;
                }

                .currency-text {
                    position: absolute;
                    pointer-events: none;
                    background-color: #ffffff;
                    border-radius: 3px;
                    top: 2px;
                    left: 2px;
                    bottom: 2px;
                    text-indent: 10px;
                    z-index: 1;
                    display: flex;
                    align-items: center;
                    padding: 0;

                    &.readonly {
                        background-color: #DDDDDD;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        border-right: transparent;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }

                    .placeholder {
                        color: #BFBFBF;
                    }
                }

                .ant-input-number {
                    border-top-left-radius: 3px;
                    border-bottom-left-radius: 3px;
                }

                .ant-input-number-group-addon {
                    border-top-right-radius: 3px;
                    border-bottom-right-radius: 3px;
                }
            }

            .number-value {
                position: relative;

                .number {
                    position: relative;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 1;
                    border-radius: 3px;
                }

                .number-text {
                    position: absolute;
                    pointer-events: none;
                    background-color: #ffffff;
                    border-radius: 3px;
                    top: 2px;
                    left: 2px;
                    right: 2px;
                    bottom: 2px;
                    text-indent: 5px;
                    z-index: 2;
                    display: flex;
                    align-items: center;
                }

                .ant-input-number {
                    border-top-left-radius: 3px;
                    border-bottom-left-radius: 3px;
                }

                .ant-input-number-group-addon {
                    border-top-right-radius: 3px;
                    border-bottom-right-radius: 3px;
                }
            }
        }




    }
}


/** 文件上传 */
.form-item-popover-files {
    .file {
        height: 40px;
        width: 380px;
        max-width: calc(100vw - 60px);
        display: flex;
        align-items: center;

        .file-icon {
            margin-right: 10px;
            font-size: 16px;
        }

        .file-name {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }
    }
}

.form-item-upload-popover-title {
    display: flex;
}


/* 只读提示 */
.readonly-tip {
    // display: flex;

    .copy {
        margin-left: 5px;
        cursor: pointer;
        // color: var(--primary);
    }
}

.textarea-modal {

    .contenteditable {
        min-height: 100%;
        font-size: 17px;
        user-select: text;

        &:focus-visible {
            outline: none;
        }

        &:empty:before {
            content: attr(data-placeholder);
            color: #bbb;
        }

        &:focus:before {
            content: none;
        }
    }

    .textarea-modal-textarea {
        // background-color: lightcoral;
        width: 100%;
        height: 99%;
        font-size: 17px;
        box-sizing: border-box;
        border: none;
        padding: 0;

        &:focus-visible {
            outline: none;
        }
    }

    .footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 10px;
    }

}